<template>
  <div>
    <MyHead></MyHead>
    <div class="container">
      <div class="category-content">
        <div class="list-item" v-for="(l, i) in list" :key="i">
          <div class="c-title">{{ l.categoryName }}</div>
          <div class="c-list">
            <div class="c-list-item" v-for="(a, b) in l.subCate" :key="b">
              {{ a.categoryName }}
            </div>
            <div class="line-black"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import MyHead from "../../components/MyHead.vue";
import { getCategorys } from "./service";
export default {
  components: {
    MyHead,
  },
  data() {
    return {
      list: [],
    };
  },
  methods: {
    async initData() {
      const { data } = (await getCategorys()) || {};
      this.list = data || [];
      console.log(this.list, "154454");
    },
  },
  mounted() {
    this.initData();
  },
};
</script>
<style lang="less" scoped>
@import "styles/index.less";
.container {
  font-family: "sans-serif", PingFang SC, Lantinghei SC, Helvetica Neue,
    Helvetica\, Arial, Microsoft YaHei;
  font-size: 16px;
  .margin-top(82);
  .padding-bottom(60);
  .category-content {
    .padding(20,20,20,20);
    .list-item {
      color: #fff;
      display: flex;
      background-color: #1c1c1e;
      .border-radius(5);
      .margin-bottom(20);
      align-items: center;
      justify-content: space-between;
      text-align: center;
      .c-title {
        flex: 1;
      }
      .c-list {
        flex: 3;
        position: relative;
        .c-list-item {
          width: 33%;
          .line-height(45);
          float: left;
          border-bottom: 1px solid #000;
          border-left: 1px solid #000;
        }
        .line-black {
          width: 100%;
          .h(1);
          background-color: #1c1c1e;
          position: absolute;
          bottom: 0;
          right: 0;
        }
      }
    }
  }
}
</style>
